<template>
  <div class="source-management">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/salvation">超度与救赎</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link to="/salvation/merit-transfer">功德转移系统</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>来源管理</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="page-title">功德来源管理</div>
        <div class="page-subtitle">管理和监控功德的各种获取来源</div>
      </div>
      <div class="header-actions">
        <a-button type="primary" @click="addSource">
          <PlusOutlined />
          新增来源
        </a-button>
      </div>
    </div>

    <!-- 功德来源统计 -->
    <div class="source-stats">
      <a-row :gutter="[20, 20]">
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <GiftOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ sourceStats.totalSources }}</div>
              <div class="stat-label">活跃来源</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <TrophyOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ sourceStats.todayGenerated }}</div>
              <div class="stat-label">今日产生</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <RiseOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ sourceStats.totalGenerated }}</div>
              <div class="stat-label">累计产生</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <StarOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ sourceStats.averageRating }}</div>
              <div class="stat-label">平均质量</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 功德来源列表 -->
    <div class="source-list">
      <div class="list-header">
        <h3>功德来源管理</h3>
        <div class="header-actions">
          <a-input-search placeholder="搜索来源名称或类型" style="width: 300px" @search="handleSearch" />
          <a-select v-model:value="typeFilter" placeholder="来源类型" style="width: 120px; margin-left: 12px" @change="handleFilterChange">
            <a-select-option value="">全部类型</a-select-option>
            <a-select-option value="善行">善行</a-select-option>
            <a-select-option value="布施">布施</a-select-option>
            <a-select-option value="诵经">诵经</a-select-option>
            <a-select-option value="放生">放生</a-select-option>
          </a-select>
        </div>
      </div>

      <a-table :columns="columns" :data-source="filteredSources" :pagination="pagination" row-key="id">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'type'">
            <a-tag :color="getTypeColor(record.type)">
              {{ record.type }}
            </a-tag>
          </template>
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ record.status }}
            </a-tag>
          </template>
          <template v-if="column.key === 'efficiency'">
            <a-progress :percent="record.efficiency" size="small" :stroke-color="getEfficiencyColor(record.efficiency)" />
          </template>
          <template v-if="column.key === 'quality'">
            <a-rate :value="record.quality / 20" disabled style="font-size: 14px" />
            <span style="margin-left: 8px; color: rgba(255, 255, 255, 0.8)"> {{ record.quality }}/100 </span>
          </template>
          <template v-if="column.key === 'actions'">
            <a-space>
              <a-button type="link" size="small" @click="viewDetail(record)"> 查看详情 </a-button>
              <a-button type="link" size="small" @click="editSource(record)"> 编辑来源 </a-button>
              <a-button type="link" size="small" danger @click="disableSource(record)" :disabled="record.status === '已禁用'"> 禁用 </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>

    <!-- 查看详情模态框 -->
    <a-modal v-model:open="showDetailModal" title="功德来源详情" width="800px" :footer="null">
      <div class="source-detail" v-if="selectedSource">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-card class="detail-card">
              <h4>基本信息</h4>
              <a-descriptions :column="1" size="small">
                <a-descriptions-item label="来源编号">{{ selectedSource.id }}</a-descriptions-item>
                <a-descriptions-item label="来源名称">{{ selectedSource.name }}</a-descriptions-item>
                <a-descriptions-item label="类型">
                  <a-tag :color="getTypeColor(selectedSource.type)">
                    {{ selectedSource.type }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="描述">{{ selectedSource.description }}</a-descriptions-item>
                <a-descriptions-item label="基础功德">{{ selectedSource.baseAmount }}</a-descriptions-item>
                <a-descriptions-item label="功德倍数">{{ selectedSource.multiplier }}x</a-descriptions-item>
                <a-descriptions-item label="状态">
                  <a-tag :color="getStatusColor(selectedSource.status)">
                    {{ selectedSource.status }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="管理者">{{ selectedSource.manager }}</a-descriptions-item>
                <a-descriptions-item label="最后更新">{{ selectedSource.lastUpdate }}</a-descriptions-item>
              </a-descriptions>
            </a-card>
          </a-col>

          <a-col :span="12">
            <a-card class="detail-card">
              <h4>性能指标</h4>
              <div class="performance-section">
                <div class="metric-item">
                  <span>效率评级:</span>
                  <a-progress :percent="selectedSource.efficiency" :stroke-color="getEfficiencyColor(selectedSource.efficiency)" />
                </div>
                <div class="metric-item">
                  <span>质量评分:</span>
                  <div style="display: flex; align-items: center; gap: 8px">
                    <a-rate :value="selectedSource.quality / 20" disabled />
                    <span>{{ selectedSource.quality }}/100</span>
                  </div>
                </div>
                <div class="metric-item">
                  <span>累计产生:</span>
                  <span style="font-size: 18px; font-weight: bold; color: #ffd700">{{ selectedSource.totalGenerated.toLocaleString() }}</span>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>

        <a-card class="detail-card" style="margin-top: 16px">
          <h4>使用规则</h4>
          <p>• 每次善行将获得 {{ selectedSource.baseAmount }} × {{ selectedSource.multiplier }} = {{ selectedSource.baseAmount * selectedSource.multiplier }} 功德</p>
          <p>• 需要经过 {{ selectedSource.manager }} 的审核确认</p>
          <p>• 功德将在行为完成后24小时内到账</p>
          <p>• 恶意刷功德将导致来源被禁用</p>
        </a-card>
      </div>
    </a-modal>

    <!-- 新增/编辑来源模态框 -->
    <a-modal v-model:open="showFormModal" :title="isEditing ? '编辑功德来源' : '新增功德来源'" width="600px" @ok="submitForm" :confirmLoading="loading">
      <a-form :model="sourceForm" :rules="formRules" layout="vertical" ref="formRef">
        <a-form-item label="来源名称" name="name" required>
          <a-input v-model:value="sourceForm.name" placeholder="请输入来源名称" />
        </a-form-item>

        <a-form-item label="来源类型" name="type" required>
          <a-select v-model:value="sourceForm.type" placeholder="请选择来源类型">
            <a-select-option value="善行">善行</a-select-option>
            <a-select-option value="布施">布施</a-select-option>
            <a-select-option value="诵经">诵经</a-select-option>
            <a-select-option value="放生">放生</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="来源描述" name="description" required>
          <a-textarea v-model:value="sourceForm.description" :rows="3" placeholder="请详细描述此功德来源" />
        </a-form-item>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="基础功德值" name="baseAmount" required>
              <a-input-number v-model:value="sourceForm.baseAmount" :min="1" :max="1000" placeholder="基础功德值" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="功德倍数" name="multiplier" required>
              <a-input-number v-model:value="sourceForm.multiplier" :min="0.1" :max="5" :step="0.1" placeholder="功德倍数" style="width: 100%" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="管理者" name="manager" required>
          <a-select v-model:value="sourceForm.manager" placeholder="请选择管理者">
            <a-select-option value="观音菩萨">观音菩萨</a-select-option>
            <a-select-option value="地藏菩萨">地藏菩萨</a-select-option>
            <a-select-option value="文殊菩萨">文殊菩萨</a-select-option>
            <a-select-option value="普贤菩萨">普贤菩萨</a-select-option>
            <a-select-option value="布施菩萨">布施菩萨</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="状态" name="status">
          <a-radio-group v-model:value="sourceForm.status">
            <a-radio value="活跃">活跃</a-radio>
            <a-radio value="暂停">暂停</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useSalvationStore } from '@/stores/salvation'
import { PlusOutlined, GiftOutlined, TrophyOutlined, RiseOutlined, StarOutlined } from '@ant-design/icons-vue'
import { Modal, message } from 'ant-design-vue'

const salvationStore = useSalvationStore()

// 来源统计数据
const sourceStats = ref({
  totalSources: 24,
  todayGenerated: 8560,
  totalGenerated: 125678,
  averageRating: 4.6
})

// 筛选条件
const typeFilter = ref('')
const searchKeyword = ref('')

// 模态框状态
const showDetailModal = ref(false)
const showFormModal = ref(false)
const selectedSource = ref(null)
const isEditing = ref(false)
const loading = ref(false)
const formRef = ref()

// 表单数据
const sourceForm = ref({
  name: '',
  type: '',
  description: '',
  baseAmount: 50,
  multiplier: 1.0,
  manager: '',
  status: '活跃'
})

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: '请输入来源名称', trigger: 'blur' },
    { min: 2, max: 20, message: '来源名称长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  type: [{ required: true, message: '请选择来源类型', trigger: 'change' }],
  description: [
    { required: true, message: '请输入来源描述', trigger: 'blur' },
    { min: 10, max: 200, message: '描述长度在 10 到 200 个字符', trigger: 'blur' }
  ],
  baseAmount: [
    { required: true, message: '请输入基础功德值', trigger: 'blur' },
    { type: 'number', min: 1, max: 1000, message: '基础功德值范围为 1-1000', trigger: 'blur' }
  ],
  multiplier: [
    { required: true, message: '请输入功德倍数', trigger: 'blur' },
    { type: 'number', min: 0.1, max: 5, message: '功德倍数范围为 0.1-5', trigger: 'blur' }
  ],
  manager: [{ required: true, message: '请选择管理者', trigger: 'change' }]
}

// 分页配置
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total, range) => `共 ${total} 条记录，第 ${range[0]}-${range[1]} 条`
})

// 模拟来源数据
const sourceData = ref([
  {
    id: 'MS001',
    name: '慈善捐助',
    type: '布施',
    description: '向贫困家庭捐助金钱物资',
    baseAmount: 100,
    multiplier: 1.5,
    status: '活跃',
    efficiency: 92,
    quality: 88,
    totalGenerated: 45600,
    lastUpdate: '2024-01-15 10:30:00',
    manager: '布施菩萨'
  },
  {
    id: 'MS002',
    name: '救助动物',
    type: '放生',
    description: '拯救受伤或被困的动物',
    baseAmount: 80,
    multiplier: 2.0,
    status: '活跃',
    efficiency: 95,
    quality: 92,
    totalGenerated: 32100,
    lastUpdate: '2024-01-15 09:15:00',
    manager: '观音菩萨'
  },
  {
    id: 'MS003',
    name: '帮助老人',
    type: '善行',
    description: '照顾孤寡老人日常生活',
    baseAmount: 60,
    multiplier: 1.8,
    status: '活跃',
    efficiency: 87,
    quality: 85,
    totalGenerated: 28900,
    lastUpdate: '2024-01-15 08:45:00',
    manager: '地藏菩萨'
  },
  {
    id: 'MS004',
    name: '诵读经文',
    type: '诵经',
    description: '虔诚诵读佛经经文',
    baseAmount: 40,
    multiplier: 1.2,
    status: '暂停',
    efficiency: 78,
    quality: 82,
    totalGenerated: 19200,
    lastUpdate: '2024-01-14 16:20:00',
    manager: '文殊菩萨'
  }
])

// 表格列配置
const columns = [
  {
    title: '来源编号',
    dataIndex: 'id',
    key: 'id',
    width: 100
  },
  {
    title: '来源名称',
    dataIndex: 'name',
    key: 'name',
    width: 120
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    width: 80
  },
  {
    title: '基础功德',
    dataIndex: 'baseAmount',
    key: 'baseAmount',
    width: 100
  },
  {
    title: '倍数',
    dataIndex: 'multiplier',
    key: 'multiplier',
    width: 80
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 80
  },
  {
    title: '效率',
    dataIndex: 'efficiency',
    key: 'efficiency',
    width: 100
  },
  {
    title: '质量评分',
    dataIndex: 'quality',
    key: 'quality',
    width: 150
  },
  {
    title: '累计产生',
    dataIndex: 'totalGenerated',
    key: 'totalGenerated',
    width: 100
  },
  {
    title: '管理者',
    dataIndex: 'manager',
    key: 'manager',
    width: 100
  },
  {
    title: '操作',
    key: 'actions',
    width: 200
  }
]

// 过滤后的来源列表
const filteredSources = computed(() => {
  let result = sourceData.value

  // 类型筛选
  if (typeFilter.value) {
    result = result.filter((source) => source.type === typeFilter.value)
  }

  // 关键词搜索
  if (searchKeyword.value) {
    result = result.filter((source) => source.name.includes(searchKeyword.value) || source.type.includes(searchKeyword.value))
  }

  pagination.value.total = result.length
  return result
})

// 搜索处理
const handleSearch = (value) => {
  searchKeyword.value = value
}

// 筛选变更处理
const handleFilterChange = () => {
  pagination.value.current = 1
}

// 查看详情
const viewDetail = (record) => {
  selectedSource.value = record
  showDetailModal.value = true
}

// 新增来源
const addSource = () => {
  isEditing.value = false
  resetForm()
  showFormModal.value = true
}

// 编辑来源
const editSource = (record) => {
  isEditing.value = true
  selectedSource.value = record
  sourceForm.value = {
    name: record.name,
    type: record.type,
    description: record.description,
    baseAmount: record.baseAmount,
    multiplier: record.multiplier,
    manager: record.manager,
    status: record.status
  }
  showFormModal.value = true
}

// 禁用来源
const disableSource = (record) => {
  Modal.confirm({
    title: '确认禁用来源',
    content: `确定要禁用功德来源"${record.name}"吗？禁用后该来源将无法产生新的功德。`,
    okText: '确认禁用',
    okType: 'danger',
    cancelText: '取消',
    onOk: async () => {
      try {
        // 模拟API调用
        await new Promise((resolve) => setTimeout(resolve, 1000))

        // 更新本地数据
        const index = sourceData.value.findIndex((item) => item.id === record.id)
        if (index !== -1) {
          sourceData.value[index].status = '已禁用'
          sourceData.value[index].lastUpdate = new Date().toLocaleString()
        }

        message.success('功德来源已禁用')
      } catch (error) {
        message.error('禁用失败，请重试')
      }
    }
  })
}

// 重置表单
const resetForm = () => {
  sourceForm.value = {
    name: '',
    type: '',
    description: '',
    baseAmount: 50,
    multiplier: 1.0,
    manager: '',
    status: '活跃'
  }
}

// 提交表单
const submitForm = async () => {
  try {
    await formRef.value.validate()
    loading.value = true

    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 1500))

    if (isEditing.value) {
      // 编辑模式
      const index = sourceData.value.findIndex((item) => item.id === selectedSource.value.id)
      if (index !== -1) {
        sourceData.value[index] = {
          ...sourceData.value[index],
          ...sourceForm.value,
          lastUpdate: new Date().toLocaleString()
        }
      }
      message.success('功德来源编辑成功')
    } else {
      // 新增模式
      const newId = 'MS' + String(sourceData.value.length + 1).padStart(3, '0')
      const newSource = {
        id: newId,
        ...sourceForm.value,
        efficiency: 0,
        quality: 60,
        totalGenerated: 0,
        lastUpdate: new Date().toLocaleString()
      }
      sourceData.value.push(newSource)
      message.success('功德来源新增成功')
    }

    showFormModal.value = false
    resetForm()
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    loading.value = false
  }
}

// 获取类型颜色
const getTypeColor = (type) => {
  const colors = {
    善行: 'blue',
    布施: 'green',
    诵经: 'purple',
    放生: 'orange'
  }
  return colors[type] || 'default'
}

// 获取状态颜色
const getStatusColor = (status) => {
  const colors = {
    活跃: 'success',
    暂停: 'warning',
    已禁用: 'error'
  }
  return colors[status] || 'default'
}

// 获取效率颜色
const getEfficiencyColor = (efficiency) => {
  if (efficiency >= 90) return '#52c41a'
  if (efficiency >= 70) return '#1890ff'
  if (efficiency >= 50) return '#faad14'
  return '#f5222d'
}

onMounted(() => {
  console.log('功德来源管理页面已加载')
})
</script>

<style lang="scss" scoped>
.source-management {
  padding: 24px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
  color: #fff;

  // 面包屑导航
  .breadcrumb {
    margin-bottom: 24px;

    :deep(.ant-breadcrumb-link) {
      color: rgba(255, 255, 255, 0.8);

      &:hover {
        color: #ffd700;
      }
    }

    :deep(.ant-breadcrumb-separator) {
      color: rgba(255, 255, 255, 0.6);
    }
  }

  // 页面头部
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .header-content {
      .page-title {
        font-size: 2rem;
        font-weight: bold;
        color: #fff;
        margin-bottom: 8px;
      }

      .page-subtitle {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1rem;
      }
    }
  }

  // 来源统计
  .source-stats {
    margin-bottom: 32px;

    .stat-card {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: all 0.3s ease;

      .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        background: rgba(255, 215, 0, 0.2);
        color: #ffd700;
      }

      .stat-content {
        .stat-value {
          font-size: 1.8rem;
          font-weight: bold;
          color: #fff;
          margin-bottom: 4px;
        }

        .stat-label {
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.9rem;
        }
      }
    }
  }

  // 来源列表
  .source-list {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;

    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      h3 {
        margin: 0;
        color: #fff;
        font-size: 1.2rem;
      }

      .header-actions {
        display: flex;
        align-items: center;
      }
    }

    :deep(.ant-table) {
      background: transparent;

      .ant-table-thead > tr > th {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.9);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }

      .ant-table-tbody > tr > td {
        background: transparent;
        color: rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .ant-table-tbody > tr:hover > td {
        background: rgba(255, 255, 255, 0.05);
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .source-management {
    padding: 16px;

    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .header-content .page-title {
        font-size: 1.5rem;
      }
    }

    .stat-card {
      flex-direction: column;
      text-align: center;
      gap: 12px;

      .stat-content .stat-value {
        font-size: 1.5rem;
      }
    }

    .source-list .list-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
  }
}

// 模态框样式
:deep(.ant-modal) {
  .ant-modal-content {
    background: rgba(26, 26, 46, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .ant-modal-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .ant-modal-title {
      color: #fff;
    }
  }

  .ant-modal-body {
    background: transparent;
    color: #fff;
  }

  .ant-modal-footer {
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

// 详情卡片样式
.source-detail {
  .detail-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;

    :deep(.ant-card-head) {
      background: rgba(255, 255, 255, 0.05);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-card-head-title {
        color: #ffd700;
        font-weight: bold;
      }
    }

    :deep(.ant-card-body) {
      background: transparent;
      color: #fff;
    }

    h4 {
      color: #ffd700;
      margin-bottom: 16px;
      font-size: 1.1rem;
    }

    p {
      margin-bottom: 8px;
      line-height: 1.6;
    }
  }

  .performance-section {
    .metric-item {
      margin-bottom: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        color: rgba(255, 255, 255, 0.8);
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  :deep(.ant-descriptions) {
    .ant-descriptions-item-label {
      color: rgba(255, 255, 255, 0.8);
    }

    .ant-descriptions-item-content {
      color: #fff;
    }
  }
}

// 表单样式
:deep(.ant-form) {
  .ant-form-item-label > label {
    color: rgba(255, 255, 255, 0.9);
  }

  .ant-input,
  .ant-input-number,
  .ant-select-selector,
  .ant-select-selection-search-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;

    &:hover {
      border-color: #ffd700;
    }

    &:focus {
      border-color: #ffd700;
      box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
    }
  }

  .ant-input::placeholder,
  .ant-input-number-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }

  .ant-select-dropdown {
    background: rgba(26, 26, 46, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);

    .ant-select-item-option {
      color: #fff;

      &:hover {
        background: rgba(255, 215, 0, 0.1);
      }

      &.ant-select-item-option-selected {
        background: rgba(255, 215, 0, 0.2);
        color: #ffd700;
      }
    }
  }

  .ant-radio-group {
    .ant-radio-wrapper {
      color: rgba(255, 255, 255, 0.8);

      .ant-radio-checked .ant-radio-inner {
        background-color: #ffd700;
        border-color: #ffd700;
      }

      &:hover .ant-radio-inner {
        border-color: #ffd700;
      }
    }
  }

  .ant-input-number-handler-wrap {
    background: rgba(255, 255, 255, 0.1);

    .ant-input-number-handler {
      border-left: 1px solid rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 0.6);

      &:hover {
        color: #ffd700;
      }
    }
  }
}
</style>
